import { useState } from 'react'
import { Question } from '@/data/questions'

interface Props {
  question: Question;
  onAnswer: (scores: { [key: string]: number }) => void;
  currentQuestion: number;
  totalQuestions: number;
}

export default function QuestionCard({ 
  question, 
  onAnswer, 
  currentQuestion, 
  totalQuestions 
}: Props) {
  const [selectedOption, setSelectedOption] = useState<number | null>(null)

  const handleSelect = (index: number, scores: { [key: string]: number }) => {
    setSelectedOption(index)
    setTimeout(() => {
      onAnswer(scores)
      setSelectedOption(null)
    }, 400)
  }

  return (
    <div className="w-full bg-white rounded-2xl shadow-sm p-6 sm:p-8">
      {/* 进度条 */}
      <div className="mb-6">
        <div className="flex justify-between text-xs sm:text-sm text-[#999999] mb-2">
          <span>{currentQuestion}/{totalQuestions}</span>
          <span>{Math.round((currentQuestion / totalQuestions) * 100)}%</span>
        </div>
        <div className="w-full h-[2px] bg-[#f0f0f0] rounded-full overflow-hidden">
          <div 
            className="h-full bg-[#2a2a2a] rounded-full progress-bar"
            style={{ width: `${(currentQuestion / totalQuestions) * 100}%` }}
          ></div>
        </div>
      </div>

      {/* 问题 */}
      <h2 className="text-lg sm:text-xl font-medium text-[#2a2a2a] mb-6">
        {question.text}
      </h2>

      {/* 选项 */}
      <div className="space-y-3">
        {question.options.map((option, index) => (
          <button
            key={index}
            onClick={() => handleSelect(index, option.scores)}
            className={`w-full p-4 sm:p-5 text-left rounded-xl transition-all duration-300 
              border group
              ${selectedOption === index 
                ? 'bg-[#2a2a2a] text-white border-[#2a2a2a]' 
                : 'bg-white text-[#666666] border-[#f0f0f0] hover:border-[#2a2a2a]'}`}
          >
            <div className="flex items-center">
              <span className={`flex-shrink-0 w-6 h-6 flex items-center justify-center 
                rounded-full mr-3 text-xs border transition-colors duration-300
                ${selectedOption === index
                  ? 'border-white text-white'
                  : 'border-[#d9d9d9] text-[#999999] group-hover:border-[#2a2a2a] group-hover:text-[#2a2a2a]'}`}>
                {String.fromCharCode(65 + index)}
              </span>
              <span className="text-sm sm:text-base">{option.text}</span>
            </div>
          </button>
        ))}
      </div>
    </div>
  )
}